<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="站点图片" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		<view class="" >
			<view class="">
				<!-- <map style="width: 100%; height: 300px;"
				id='map'
				:latitude="latitude" 
				:scale='scale'
				:longitude="longitude" 
				 show-location
				 show-compass
				:markers="covers"
				:circles='circlesobj'
				@markertap='markertap'>
				
				</map> -->
				<image style="width: 100vw;" :src="Info.imgUrl ? Info.imgUrl :''" mode=""></image>
			</view>
			<view class="f-f-c b-rd b-s p20 bf" style="position: relative;">
				<view class="f-f-c f1  pb20 pt20" style="position: relative" >
					
				   <span class="c3 fb">{{Info.name}}</span>
				   <!-- <span class="mt20">{{Info.province}}{{Info.city}}{{Info.county}}</span>
				   <span class="mt20">{{Info.address}}</span> -->
				   <span class="mt20">
					   <span class="c3 f32">{{Info.contactor}}</span>
					   <span class="c3 f32 ml20">{{Info.phone}}</span>
					</span>
				   <view class="mt20 c9 f28 f" @click="backMyLocation">
					   <u-icon  name="map" color="var(--theme)" size="12"></u-icon>
					   
					   <span class="cp f28 mr20">{{Info.distanceStr}}</span>
					   <!-- <span class="f28 mr20">离你最近</span> -->
					   <span class="f28">{{Info.province}}{{Info.city}}{{Info.county}}{{Info.address}}</span>
				   </view>
				 
				</view>
				<view class="f-s-b">
					<view class="tips1 f-c" @click="telFun()">
						   拨打电话
						<u-icon class="ml10" name="phone" color="#fff" size="14"></u-icon>
					</view>
					<view class="tips2 f-c" @click="mapClick()">
						   导航
						<image class="ml10" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/nav.png" style="width: 32rpx;" mode="widthFix"></image>
					</view>
					
					
				</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>


<script>
	 
	export default {
		data() {
			return {
				mapContext:null,
				siteNum:5,
				latitude: 117.186698,
				longitude: 31.819383,
				showMap:false,
				Info:{},
				covers: [{
					id:1,
					width: 30,
					height: 30,
					latitude: 117.186698,
					longitude: 31.819383,
					iconPath: 'https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pos2.png',
					
					label:{
						content:'站点1'
					}
				}, ],
				circlesobj:[
					{
						latitude: 117.186698,
						longitude: 31.819383,
						radius:500,
						color:'#FFFFFFF',
						fillColor:'#CCCCCC9F'
					}
				],
				scale:16,
				
			}
		},
		onReachBottom() {
			
		},
		onReady() {
		// 	this.map = uni.createMapContext("map2", this);   // 得到map对象
		},
		onLoad: function(option){
			       
					const item = JSON.parse(option.data)  //接受传递过来的位置信息 转换成json对象
					this.Info = item
					let lat = Number(item.latitude)
					let lon = Number(item.longitude)
					let name = item.name
					this.latitude = lat
					this.longitude = lon
					this.getsite(item)
					
					
	     },
		//covers相当于标记点 用于在地图上显示标记的位置
		onShow() {
			
		},
		methods: {
			
			getsite(it){
				let that = this
				let lat = that.latitude
				let lon = that.longitude
				let arr = [it]
				this.covers = arr.map((item)=>{
					return {
						id:item.id,
						width: 30,
						height: 30,
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: item.imgUrl,
						label:{
							content:item.name
						}
					}
				})
				this.circlesobj = [{
						latitude: it.latitude,
						longitude: it.longitude,
						radius:500,
						color:'#FFFFFFF',
						fillColor:'#CCCCCC9F'
				}]
			},
			
			backMyLocation() {
				      let that = this
					// this.mapContext.moveToLocation();
					const mapCtx = uni.createMapContext("map",this);
					console.log(that.latitude,that.longitude,'item4444')
					mapCtx.moveToLocation({
					  latitude: this.latitude,
					  longitude: this.longitude,
					  success: () => {
						console.log('原点1')
						const timer = setTimeout(() => {
							console.log('原点2')
						  // this.longitude = 31.820567,
						  // this.latitude = 117.227267,
							clearTimeout(timer);
						  //进行缩放，设置为16
						  this.scale = 16;
						}, 300);
					  }
					})
			
			},
			markertap(e){
				console.log(e,'eee')
			},
			getDetail(id){
				let that = this
				console.log(id,'optionoptionoption')
				this.$api.request('get', `site/app/${id}`).then(res => {
				 console.log(res.data.latitude,'res')
				 // that.latitude = Number(res.data.latitude)
				 // that.longitude = Number(res.data.longitude)
				 // that.info = res.data
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			    // 跳转至地图ye
			      mapClick(e) {
			        console.log('111');
					
			        uni.openLocation({
			          latitude: this.latitude,
			          longitude: this.longitude,
			          name: this.Info.name,
			          address: this.Info.address,
			          success() {
			            console.log('success');
			          }
			        })
			      },
				  telFun() {
					  
				  		uni.makePhoneCall({
				  			phoneNumber: this.Info.phone, //电话号码
				  			success: function(e) {
				  				console.log(e);
				  			},
				  			fail: function(e) {
				  				console.log(e);
				  			}
				  		})
				  	},
			
			
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.tips1{
	/* 	position: absolute;
		top: 40rpx;
		right: 64rpx; */
		width: 320rpx;
		height: 60rpx;
		background: var(--theme);
		border: 1px solid var(--theme);
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		border-radius:40rpx;
	}
	.tips2{
	/* 	position: absolute;
		top: 40rpx;
		right: 64rpx; */
		width: 320rpx;
		height: 60rpx;
		border: 1px solid var(--theme);
		color: var(--theme);
		text-align: center;
		line-height: 60rpx;
		border-radius:40rpx;
	}
	
	
</style>
